<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../style.css" type="text/css" rel="stylesheet" />

<title>Transform PK Translate/Rotation/Scale</title>
<script>
	function draw(id)
	{
		var canvas=document.getElementById(id);
		if(canvas==null)
		return false;
		var context=canvas.getContext('2d');
		//定义颜色
		var colors=["red","orange","yellow","green","blue","navy","purple","red","orange","yellow","green","blue","navy","purple","red","orange","yellow","green","blue","navy","purple"];
		//定义线宽
		context.lineWidth=10;
		var time = new Date().valueOf();
		var j = 100;
		for(var i=0;i<colors.length;i++){
			if(id == 'canvas1') {
				//注意顺序, translate是无记忆的，也就是说translate以后，会后的计算不会带着偏移值！！！
				context.translate(0,10);
				context.rotate(Math.PI / 18);
				context.scale(1.2, 1.3);
			}
			else {
				//transform的顺序 translate -> scale -> rotate
				context.transform(Math.cos(Math.PI/18) * 1.2,
					Math.sin(Math.PI/18) * 1.2,
					-Math.sin(Math.PI/18) * 1.3,
					Math.cos(Math.PI/18) * 1.3, 0, 10)
			}
			context.strokeStyle=colors[i];
			context.beginPath();
			context.arc(50,100,100,0,Math.PI,true);
			context.stroke();
			if(i == colors.length - 1 && j) {
				context.setTransform(1,0,0,1,10 * (100 - --j),0);
				i = -1;
			}
		}
		document.getElementById(id + '-btn').innerHTML = new Date().valueOf() - time;
	}
</script>
<style type="text/css">
    textarea.code {
        width: 670px;
        border: 2px solid gray;
        text-align: left;
        padding: 0.5em;
        background-color: #D9D9D9;
    }
    li  {
        border: 10px solid #ccc;
        padding-top: 2em; 
        padding-bottom: 2em;
        padding-left: 10px;
        margin-bottom: 4em;
    }
    button {
        margin-left: 10px;
    }
</style>
</head>
<body>  
<div id="container">
    <h1>Transform VS Scale/Rotation/Translate</h1>
    <ol>
        <li>
        	<textarea class="code" rows="15" cols="40" readonly="readonly">
		for(var i=0;i<colors.length;i++){
			context.translate(0,10);
			context.rotate(Math.PI / 18);
			context.scale(1.2, 1.3);
			context.strokeStyle=colors[i];
			context.beginPath();
			context.arc(50,100,100,0,Math.PI,true);
			context.stroke();
			if(i == colors.length - 1 && j) {
				context.setTransform(1,0,0,1,10 * (100 - --j),0);
				i = -1;
			}
		}
	        </textarea>
			<canvas id="canvas1" width="1500" height="800"></canvas>
			<br />
			<button value="run" onclick="draw('canvas1');" style="float:left">execute test</button>
			<div id="canvas1-btn"></div>
        </li>
        <li>
        	<textarea class="code" rows="15" cols="40" readonly="readonly">
		for(var i=0;i<colors.length;i++){
			context.transform(Math.cos(Math.PI/18) * 1.2,
				Math.sin(Math.PI/18) * 1.2,
				-Math.sin(Math.PI/18) * 1.3,
				Math.cos(Math.PI/18) * 1.3, 0, 10)
			context.strokeStyle=colors[i];
			context.beginPath();
			context.arc(50,100,100,0,Math.PI,true);
			context.stroke();
			if(i == colors.length - 1 && j) {
				context.setTransform(1,0,0,1,10 * (100 - --j),0);
				i = -1;
			}
		}
	        </textarea>
	        <canvas id="canvas2" width="15000" height="800"></canvas>
			<br />
			<button value="run" onclick="draw('canvas2');" style="float:left">execute test</button>
			<div id="canvas2-btn"></div>
        </li>
    </ol>
    
    <!-- comments -->
    <p>&nbsp;</p>
    <h2 class="comment">Comments</h2>
    <div class="comment">
    相对于分开写rotate/translate/scale，合起来写一个transform的效率更高一些（平均值）！
    </div>
</div>
</body>  
</html>
